<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--引入element ui的css-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <!--el开头的是elment ui模版命令,这里增加了一个添加的按钮，el-row是独占一行 -->
<!--    布局-->
    <el-container>
        <el-header>
<!--            头部栏-->
            <el-row>
                    <el-input v-model="userData.name" style="width: 200px" placeholder="输入姓名关键字">

                    </el-input>  <el-button type="primary" @click="selectUser" icon="el-icon-search">搜索</el-button>
                    <el-button type="danger" icon="el-icon-circle-plus"
                           round
                           @click="handleAdd">新增</el-button>

            </el-row>
        </el-header>
        <el-main>
<!--            主体-->
            <template>
                <el-table
                        :data="demo.slice((current-1)*pageSize,current*pageSize)"
                        stripe
                        align="center"
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="编号"
                            align="center"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="image"
                            label="用户头像"
                            align="center"
                            width="180">

                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180"
                    align="center">
                    </el-table-column>

                    <el-table-column
                            align="center"
                            prop="age"
                            label="年龄">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button  type="primary" icon="el-icon-edit"  circle  @click="userEdit(scope.$index, scope.row,demo)"></el-button>

                            <el-popconfirm
                                    confirm-button-text='确定'
                                    cancel-button-text='取消'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="是否删除这段内容？"
                            >
                            <el-button   type="danger" icon="el-icon-delete" slot="reference" circle @click="userDelete(scope.$index,scope.row,demo)"></el-button>
                            </el-popconfirm>

                        </template>
                    </el-table-column>
                </el-table>

<!--                分页功能-->
                <div style="margin-top:20px" class="pagination">
                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange"
                            :current-page="current"
                            :page-sizes="pageSizes"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="demo.length"
                    ></el-pagination>
                </div>
            </template>
            </el-main>
    </el-container>
<!--    编辑用户i信息-->
    <div  v-show="show">

        <el-dialog align="center" title="用户信息" :visible.sync="dialogFormVisible">
            <el-form>


              <el-form-item label="姓名" >
                    <el-input v-model="userData.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" >
                    <el-input v-model="userData.age" autocomplete="off"></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" >取 消</el-button>
                <el-button v-show="btn_show" type="primary" @click="userUpdate">确定修改</el-button>
                <el-button type="primary" v-show="btn2_show" @click="add">确定添加</el-button>
            </div>
        </el-dialog>
    </div>

</div>

</body>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                show: false,
                btn_show: false,
                btn2_show: false,
                dialogFormVisible:false,
                current:1,
                pageSize: 10,
                pageSizes:[10,20,30,40,50],
                demo: [],
                userData:{
                    id:'',
                    name:'',
                    age:''
                },


            }
        },

        created(){
        //    一个预加载函数 页面还未解析前 就将数据处理完毕的方法
            this.load();
        },
            methods: {
                load(){
                //    我们期望这个方法是主要的 一开始就需要显示的方法
                    axios.get("http://localhost:8080/all",{
                        params:{
                            current:1,
                            size:20
                        }
                        }
                    )
                    .then(res=>{
                        this.demo = res.data
                        //将数据渲染到data  也就是表单上面
                        console.log(res);


                    })
                },

                userDelete(index, row, demo) {
                    console.log("我运行到这里了吗？");
                    var id = demo[index].id;
                    axios.get("http://localhost:8080/del/" + id, ).then((res) => {
                        //    再次调用查询所有的方法
                        console.log(res+"我是谁我在哪");
                    this.load()
                    }).catch((err) => {
                        console.log(err)
                    })
                },
                //分页
                handleSizeChange(val) {
                    this.pageSize = val
                },
                handleCurrentChange(val) {
                    this.current = val
                },

                //编辑框显示
                userEdit(index, row, demo) {

                    this.show = true
                    this.dialogFormVisible = true
                    this.btn_show = true
                    this.btn2_show = false
                    this.userData.id = demo[index].id
                    this.userData.name = demo[index].name
                    this.userData.age = demo[index].age

                },
                //更新
                userUpdate() {
                    axios.post("http://localhost:8080/update",{
                        id:this.userData.id,
                        name:this.userData.name,
                        age:this.userData.age,

                    }).then((res) => {
                        //编辑成功后刷新页面
                        this.load()
                        console.log("看看我运行了么");
                        //关闭遮罩层
                        this.show = false
                        this.dialogFormVisible = false
                        console.log(1, res)
                    }).catch((err) => {
                        console.log(2, err)
                    })
                },

                /**
                 * 点击新增按钮的时候显示遮罩层,同时将编辑的按钮隐藏掉
                 */
                handleAdd() {
                    this.show = true
                    this.dialogFormVisible = true
                    //将双向绑定数据滞空
                    this.userData.id = ''
                    this.userData.name = ''

                    this.userData.age = ''
                    //将新编辑按钮隐藏掉
                    this.btn_show = false
                    //将新增按钮显示 v-show 其实是display：none 和black操作
                    this.btn2_show = true
                },
            //    下面写按钮确定的具体方法了

                //确定添加的按钮具体事件
                add() {
                    console.log("我执行到这里了嘛");
                    axios.post("http://localhost:8080/add",{
                        id: this.userData.id,
                        name: this.userData.name,
                        age:  this.userData.age ,

                    }).then((res) => {
                        //添加成功后从新计算总页数
                        console.log("我有执行重新加载嘛");
                        this.load()
                        //同时关闭遮罩层
                        this.show= true
                        this.dialogFormVisible = false

                    }).catch((err) => {
                        console.log(err)
                    })
                },
                //模糊搜素的方法
                selectUser(){
                   axios.get("http://localhost:8080/getName/"+this.userData.name)
                    .then(res=>{
                        this.demo = res.data
                        console.log(res)
                    })

                },

            }
    })

</script>
</html>
